<template>
	<div class="person-chart-box">
		<div id="personChart"></div>
	</div>
</template>
<script setup>
import { reactive } from "vue";
import echarts from "@/common/utils/echarts.js";

// 月份
// let xArr = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);
// const dataArr = ref([
// 	1100, 2000, 1000, 1300, 1020, 2500, 3005, 2609, 3600, 4080, 3800, 4200,
// ]);

let personChartRef = null;
let initPersonChartData = (xArr, dataArr) => {
	let options = reactive({
		grid: {
			right: "15%",
			top: "20%",
			bottom: "12%",
		},
		tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "line",
				lineStyle: {
					type: "solid",
					width: 20,
					color: "rgba(216,240,255,0.1)",
				},
			},
			className: "tooltipBox",
			backgroundColor: "transparent",
			textStyle: {
				color: "#D8F0FF",
				textShadowColor: "#3FBFFF",
				textShadowBlur: 2,
			},
			padding: [3, 12, 3, 12],
			borderWidth: 0,
			formatter: (params) => {
				let res = "";
				for (let i = 0; i < params.length; i++) {
					res += `<span>${params[i].value}</span>`;
				}
				return res;
			},
		},
		xAxis: {
			type: "category",
			data: xArr,
			name: "单位（月）",
			nameTextStyle: {
				color: "#D3E3FF",
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				show: true,
				color: "rgba(176,215,255,0.4)",
			},
			axisLabel: {
				color: "#D3E3FF",
				interval: 0,
			},
		},
		yAxis: [
			{
				type: "value",
				name: "单位（人）",
				nameTextStyle: {
					color: "#D3E3FF",
				},
				axisLabel: {
					color: "rgba(216,240,255,0.8)",
				},
				splitLine: {
					lineStyle: {
						color: "rgba(176,215,255,0.25)",
						type: "dashed",
					},
				},
			},
		],
		series: [
			{
				type: "line",
				smooth: true,
				data: dataArr,
				showSymbol: false,
				itemStyle: {
					color: "#00D3FD",
				},
				lineStyle: {
					color: "#00D3FD",
				},
				areaStyle: {
					color: {
						x: 0, //右
						y: 0, //下
						x2: 0, //左
						y2: 1, //上
						colorStops: [
							{
								offset: 0,
								color: "rgba(0,150,255,0.25)",
							},
							{
								offset: 1,
								color: "rgba(0,150,255,0)",
							},
						],
					},
				},
			},
		],
	});
	personChartRef.setOption(options);
};
const initPersonChart = (xArr, dataArr) => {
	personChartRef = echarts.init(document.getElementById("personChart"));
	initPersonChartData(xArr, dataArr);
};
defineExpose({
	initPersonChart,
});
</script>
<style lang="scss" scoped>
.person-chart-box {
	width: 100%;
	height: 100%;

	#personChart {
		width: 100%;
		height: 100%;

		:deep(.tooltipBox) {
			background: url("@/assets/screenImg/powerImg/leftBg.png") no-repeat;
			background-size: 100% 100%;
		}
	}
}
</style>
